import React from 'react';
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
import am4themes_animated from '@amcharts/amcharts4/themes/animated'

import './index.css'
export default class DemoAmcharts extends React.Component {
  componentDidMount() {
    // Create chart instance
    let chart = am4core.create("chartdiv", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": "Lithuania",
      "litres": 501.9,
      "units": 250
    }, {
      "country": "Czech Republic",
      "litres": 301.9,
      "units": 222
    }, {
      "country": "Ireland",
      "litres": 201.1,
      "units": 170
    }, {
      "country": "Germany",
      "litres": 165.8,
      "units": 122
    }, {
      "country": "Australia",
      "litres": 139.9,
      "units": 99
    }, {
      "country": "Austria",
      "litres": 128.3,
      "units": 85
    }, {
      "country": "UK",
      "litres": 99,
      "units": 93
    }, {
      "country": "Belgium",
      "litres": 60,
      "units": 50
    }, {
      "country": "The Netherlands",
      "litres": 50,
      "units": 42
    }];

    // Create axes
    let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country";
    categoryAxis.title.text = "Countries";

    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.title.text = "Litres sold (M)";

    // Create series
    let series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "litres";
    series.dataFields.categoryX = "country";
    series.name = "Sales";
    // 边框线宽度属性
    series.strokeWidth = 5
    // 设置提示颜色
    series.columns.template.tooltipText = "tooltip :Series: {name}\nCategory: {categoryX}\nValue: {valueY}";
    series.tooltip.getFillFromObject = false;
    series.tooltip.background.fill = am4core.color("#fff");
    series.tooltip.label.fill = am4core.color("#000");
    // 数据边框线 和内部填充颜色
    series.columns.template.stroke = am4core.color("#ff0000"); // red outline
    series.columns.template.fill = am4core.color("#00ff00"); // green fill

    // 添加点击事件
    series.events.on('hit', (ev) => {
      console.log('itemReaderText', ev.target.itemReaderText)
      console.log('dataFields', ev.target.dataFields)
      console.log('dataItem.values', ev.target.dataItem.values)

    })

    var series2 = chart.series.push(new am4charts.LineSeries());
    series2.name = "Units";
    series2.stroke = am4core.color("#CDA2AB");
    series2.strokeWidth = 3;
    series2.dataFields.valueY = "units";
    series2.dataFields.categoryX = "country";
    chart.openModal("OK. Now I'm serious.");
  }
  render() {
    return (
      <div id='chartdiv'></div>
    )
  }
}